<template>
    <div>
        <el-container>
            
            <el-header style="height:100px;">
                <img class="img1" src="@/assets/image/1.jpg">
                欢 迎 来 到 青 年 旅 社
                <img class="img2" src="@/assets/image/2.jpg">
            </el-header>
            <el-main>
                <div>
                    <el-button @click="$router.push('/home/index/shanghai')" type="primary" size="medium" round>上海分店</el-button>
                    <el-button @click="$router.push('/home/index/beijing')" type="danger" size="medium" round>北京分店</el-button>
                    <el-button @click="$router.push('/home/index/shenzhen')" type="warning" size="medium" round>深圳分店</el-button>
                    <el-button @click="$router.push('/home/index/guangzhou')" type="success" size="medium" round>广州分店</el-button>
                    <el-button @click="$router.push('/home/index/chongqing')" type="info" size="medium" round>重庆分店</el-button>
                    <el-button @click="$router.push('/home/index/hangzhou')" type="danger" size="medium" round>杭州分店</el-button>
                    <el-button @click="$router.push('/home/index/chengdu')" type="warning" size="medium" round>成都分店</el-button>
                    <el-button @click="$router.push('/home/index/nanjing')" type="success" size="medium" round>南京分店</el-button>
                    <el-button @click="$router.push('/home/index/wuhan')" type="info" size="medium" round>武汉分店</el-button>
                    <el-button @click="$router.push('/home/index/suzhou')" type="primary" size="medium" round>苏州分店</el-button>
                </div>
                <router-view></router-view>
                
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
      
    }
</script>

<style lang="scss" >
    .el-header{
        background-color: #409eff;
        color: white;
        font-size: 40px;
        font-weight: bold;
        line-height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        >.img1{
            width: 100px;
            height: 80px;
            margin-right: 100px;
        }
        >.img2{
            width: 100px;
            height: 80px;
            margin-left: 100px;
        }
    }
    .el-main{
        >div:nth-child(1){
            display: flex;
            justify-content: center;
            margin: 30px 0;
        }
        
    }
   
</style>